


CSS in Testing

by InfinitysWraith



Category: Unspecified Fandom, Workskins - Fandom
Genre: Background Overlays, CSS, Changing Ao3's Preset Headers: Author Notes/Chapter Titles/Fic Titles/Summaries/etc., Changing the Appearance of Text, Coding, Creating Interactive Elements, Embedding/Resizing Images, Gen, HTML, Hover-Over Effects on Text/Images, Invisible Links+Link Aesthetic, It's not actually a Website, It's not actually a grid, Jump-to/Choose Your Own Adventure, Making Complex Shapes with CSS, Other Additional Tags to Be Added, Popups, Sliding door animation, Testing - Freeform, Working with GIFs, formatting - Freeform, how to, workskin
Language: English
Status: In-Progress
Published: 2020-07-10
Updated: 2020-10-23
Packaged: 2021-03-04 23:08:05
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 10
Words: 13,199
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/25174384
Author URL: https://archiveofourown.org/users/InfinitysWraith/pseuds/InfinitysWraith
Summary: This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)(Pics are mine though)I'm not going to say I take requests, but I'm always looking for inspiration.
Comments: 8
Kudos: 16





	1. Changing the Basic Appearance of Text

**Chapter 1**

**YEAR 30,000**

**ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST**

**THIRD MONTH OF AUTUMN**

-

**YEAR 30,000**

**ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST**

**THIRD MONTH OF AUTUMN**

ROAN

* * *

**YEAR 10,302**

**FIRST YEAR UNDER THE REIGN OF QUEEN ZELDA THE LIBERATOR**

**THIRD MONTH OF SPRING**

WOLF

* * *

**YEAR 11,669**

**SEVENTEENTH YEAR UNDER THE REIGN OF QUEEN ZELDA THE RESURGENT**

**SECOND MONTH OF SPRING**

ADLER

* * *

**YEAR 10,572**

**432ND YEAR IN THE AGE OF PIRACY**

**SECOND MONTH OF SUMMER**

LUCIEL

* * *

HTML Coding (In Text)

<p class="goldtitle" align="center"><strong>Chapter 1</strong></p>

<p class="blueheader" align="right"><strong>YEAR 30,000</strong></p>  
<p class="blueheader" align="right"><strong>ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST</strong></p>  
<p class="blueheader" align="right"><strong>THIRD MONTH OF AUTUMN</strong></p>

<p class="blueheader5" align="right"><strong>YEAR 30,000</strong></p>  
<p class="blueheader5" align="right"><strong>ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST</strong></p>  
<p class="blueheader5" align="right"><strong>THIRD MONTH OF AUTUMN</strong></p>

* * *

CSS Coding (Workskin)
    
    
    #workskin .blueheader {
      text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
      color: #489ab8;
      font-size: 1.1em;
      font-family: Georgia,Times,Times New Roman,serif;
      border-radius: 2px;
      border-right: 10px solid #fad384;
      padding-right: 15px;
      padding: 11px;
      transform: skewY(-.3deg);
      margin: 0px auto;
    }
    
    
    #workskin .blueheader5 {
      text-shadow: 1px 1px 2px black, -1px -1px 4px #191a1d;
      color: #489ab8;
      font-size: 1.1em;
      font-family: Georgia,Times,Times New Roman,serif;
      border-radius: 2px;
      border-right: 10px solid #fad384;
      padding-right: 15px;
      padding: 10px;
      background: linear-gradient(90deg, #1d718200 98%, rgba(242,190,84,1) 100%);
      transform: skewY(-.3deg);
      margin: 0px auto;
    }  
    
      
    
    
    
    
    #workskin .goldtitle {
      color: #f2be54;
      font-weight: bold;
      font-size: 30px;
      font-family: Georgia,Times,Times New Roman,serif;
      text-align: center;
      text-shadow: -1px 1px 3px #191a1d, 1px -1px 3px #191a1d;
      transform: skewY(-.3deg);
    }


	2. Creating Complex Shapes/Images Using CSS+HTML

**Summary for the Chapter:**

> This is a filler space.

I don't know what I did, but there needs to be a space before, and only one.

* * *

HTML Code (In Text)

<p class="handleextrabottombox"> </p>

<p class="handleextratopbox"> </p>

<p class="handlebox"> </p>

<p class="screenbox"> </p>

<p class="blackbox"> </p>

CSS Code (In Work Skin)

#workskin .blackbox {  
position: relative;  
margin: 0 auto;  
margin-left: 20%;  
overflow: hidden;  
border: 10px solid #402e26;  
border-radius: 50px;  
border-top: 10px solid #3a2c32;  
border-right: 20px solid #2c2126;  
border-bottom: 10px solid rgb(23, 15, 23);  
border-left: 20px solid rgb(20, 10, 20);  
background: linear-gradient(42deg, rgba(23,15,23,1) 34%, rgba(44,33,38,1) 88%);  
box-shadow: -10px 5px 3px rgb(31, 20, 20, 20);  
width: 70%;  
height: 250px;  
}

#workskin .screenbox {  
position: absolute;  
margin: 0 auto;  
margin-left: 35%;  
margin-right: 30%;  
top: 7em;  
z-index: 1;  
border: 10px solid #402e26;  
border-radius: 25px;  
border-top: 5px solid rgb(23, 15, 23);  
border-right: 5px solid rgb(20, 10, 20);  
border-bottom: 5px solid #2c2126;  
border-left: 5px solid #3a2c32;  
background: linear-gradient(42deg, rgba(22,17,22,1) 34%, rgba(10,5,10,1) 88%);  
box-shadow: -10px 5px 3px #2c2126;  
max-width: 50%;  
width: 60%;  
height: 175px;  
cursor: not-allowed;  
}

#workskin .screenbox:hover {  
position: absolute;  
margin: 0 auto;  
margin-left: 35%;  
margin-right: 30%;  
top: 7em;  
z-index: 1;  
border: 10px solid #402e26;  
border-radius: 25px;  
border-top: 5px solid #12d3d3;  
border-right: 5px solid #12d3d3;  
border-bottom: 5px solid #0ea4a4;  
border-left: 5px solid #0ea4a4;  
background: rgba(112,255,251,1);  
box-shadow: -10px 10px 6px #0a7676, 7px -7px 6px #0a7676;  
max-width: 50%;  
width: 60%;  
height: 175px;  
cursor: not-allowed;  
transition: 2.5s ease;  
}

#workskin .handlebox {  
position: absolute;  
margin: 0 auto;  
margin-left: 5%;  
margin-right: 60%;  
overflow: hidden;  
border: 10px solid #402e26;  
border-radius: 50px;  
border-radius-right: 5px;  
border-top: 10px solid #3a2c32;  
border-right: 10px solid #2c2126;  
border-bottom: 10px solid rgb(23, 15, 23);  
border-left: 20px solid rgb(20, 10, 20);  
background: rgba(23,15,23,1);  
width: 7%;  
height: 250px;  
box-shadow: -10px 5px 3px rgb(31, 20, 20, 20);  
}

#workskin .handleextratopbox {  
position: absolute;  
z-index: 2;  
margin: 0 auto;  
margin-left: 11%;  
margin-right: 50%;  
overflow: hidden;  
border: 10px solid #402e26;  
border-radius: 0px;  
border-top: 10px solid #3a2c32;  
border-right: none;  
border-bottom: none;  
border-left: none;  
background: rgba(23,15,23,1);  
width: 20%;  
height: 50px;  
}

#workskin .handleextrabottombox {  
position: absolute;  
z-index: 2;  
margin: 0 auto;  
margin-left: 10%;  
margin-right: 50%;  
top: 270px;  
overflow: hidden;  
border: 10px solid #402e26;  
border-radius: 0px;  
border-top: none;  
border-right: none;  
border-bottom: 10px solid rgb(23, 15, 23);  
border-left: none;  
background: rgba(23,15,23,1);  
box-shadow: 0px 5px 3px rgb(31, 20, 20, 20);  
width: 20%;  
height: 50px;  
  
}

* * *

**HTML**

* * *

  
<p></p><div class="triforce-container">

<p></p><div class="triforce-container-tophalf">

<p> </p></div>

<p></p><div class="triforce-container-bothalf">

<p> </p></div>

<p></p><div class="triforce-container-bothalf2">

<p> </p></div>

<p> </p></div>

* * *

**CSS**

**-Am I nerdy yet?**

* * *
    
    
    #workskin .triforce-container {
      position: relative;
      margin: 0 auto;
      height: 300px;
      width: 300px;
      font-size: 0;
    }
    
    #workskin .triforce-container-tophalf {
      position: relative;
      margin: 0 auto;
      top: 0;
      width: 0;
      height: 0;
      border-left: 75px solid transparent;
      border-right: 75px solid transparent;
      border-bottom: 150px solid gold;
      transition: 2s;
      transition-delay: 2s;
    }
    
    #workskin .triforce-container-bothalf {
      position: relative;
      margin: 0 auto;
      left: -75px;
      width: 0;
      height: 0;
      border-left: 75px solid transparent;
      border-right: 75px solid transparent;
      border-bottom: 150px solid gold;
      transition: 2s;
      transition-delay: 2s;
    }
    
    #workskin .triforce-container-bothalf2 {
      position: absolute;
      margin: 0 auto;
      top: 150px;
      left: 150px;
      width: 0px;
      height: 0px;
      border-left: 75px solid transparent;
      border-right: 75px solid transparent;
      border-bottom: 150px solid gold;
      transition: 2s;
      transition-delay: 2s;
    }
    
    #workskin .triforce-container-bothalf2:hover {
      border-bottom: 150px solid #9efc72;
      transition: 2s;
    }
    
    #workskin .triforce-container-bothalf:hover {
      border-bottom: 150px solid #72cefc;
      transition: 2s;
    }
    
    #workskin .triforce-container-tophalf:hover {
      border-bottom: 150px solid #fc8972;
      transition: 2s;
    }
    


	3. Multi-Phase Hover Effects Meets Jump-To/Choose Your Own Adventure

**Notes for the Chapter:**

> Tester

**Hover and Unorganized Lists**

* * *

Despite this, he attempted to stand. The liquid fell away from him and pooled back into the container with echoing slaps. His efforts were met with a hard knock to the head and his foot slipping on slick grime. 

Now on the floor, he could see nothing even with his eyes wide open. The distortion of black around him was inherently unnerving. 

Something with small, moving legs touched his foot and the boy’s cries assaulted his ears. In an effort to flee, his hand walked onto something smooth that immediately lit the small rocky cavern and decorated tub in blue light!

He didn’t know what it was but he stole the small object’s light and kept it near his beating chest. 

Something like water crawled down from his damp hair and onto his back.

The blue light flickered and the boy decided he didn’t want to be in a place where his toes were red and numb, and his breaths reverberated like the world’s only noise. 

His fingers slid over jagged edges and bled raw but he followed the tantalizing scent of fresh air through the cave’s crevasses. 

The rocks relaxed into an open cave mouth where the boy craned his neck at the red night sky. It bathed the wilting forests in blood like light and dyed their leaves a muddy brown. He stared fervently at the pale face mocking him with its height and presence. 

In this moment, the boy would come to recognize the red moon as the first of many things in this world as utterly and irrecoverably wrong.

The sky should be filled with a navy so deep the stars shone through like lanterns in a forest. A blue like the deepest lakes and the richest dyes. 

Not weeping with bloody light.




* * *

CSS

* * *
    
    
    #workskin .opacity5 {
      transition: 2s;
      opacity: 5%;
    }
    
    #workskin .opacity5:hover {
      opacity: 20;
      transition: opacity 10s;
    }
    
    #workskin .blueglow {
      transition: 2s;
      opacity: 20%;
    }
    
    #workskin .blueglow:hover {
      text-shadow: 1px 1px 0px black , -1px -1px 0px black;
      color: #00FFFF;
      opacity: 80%;
      transition: opacity .5s;
    }
    
    #workskin .bluetoredglow {
      text-shadow: 1px 1px 0px black , -1px -1px 0px black;
      color: #00FFFF;
      transition: 2s;
      opacity: 80%;
    }
    
    #workskin .bluetoredglow:hover {
      color: #ff0066;
      opacity: 100%;
      transition: color 3s, opacity 2s;
      text-shadow: 1px -1px 0px #fcba03, -1px 1px black;
    }  
    
      
    
    
    
    
    #workskin .redglow:hover {
      color: #fcba03;
      font-weight: bold;
      font-family: Georgia,Times,Times New Roman,serif;
      text-shadow: 1px 1px 0 black, 0 0 4px #fff019;
      transition: 1s;
      opacity: 100%;
    }
    
    #workskin ul {
      list-style: none;
      padding-left: 0;
    }
    

* * *

HTML ("Rich Text" will erase any "Ul" class tags)

* * *

**< div class="opacity5">**

  
<p>Despite this, he attempted to stand. The liquid fell away from him and pooled back into the container with echoing slaps. His efforts were met with a hard knock to the head and his foot slipping on slick grime.&nbsp</p>

<p>Now on the floor, he could see nothing even with his eyes wide open. The distortion of black around him was inherently unnerving.&nbsp</p>

  
<p>Something with small, moving legs touched his foot and the boy&rsquos cries assaulted his ears. In an effort to flee, his hand walked onto something smooth that immediately lit the small rocky cavern and decorated tub in **< span class="blueglow">blue light</span>**!</p>

**< ul class="blueglow">**

  
<p>He didn&rsquot know what it was but he stole the small object&rsquos light and kept it near his beating chest.&nbsp</p>

  
<p>Something like water crawled down from his damp hair and onto his back.</p>

  
<p>&nbspThe blue light flickered and the boy decided he didn&rsquot want to be in a place where his toes were red and numb, and his breaths reverberated like the world&rsquos only noise.&nbsp</p>

  
<p>His fingers slid over jagged edges and bled raw but he followed the tantalizing scent of fresh air through the cave&rsquos crevasses.&nbsp</p>

**< ul class="bluetoredglow">**

  
<p>The rocks relaxed into an open cave mouth where the boy craned his neck at the red night sky. It bathed the wilting forests in blood like light and dyed their leaves a muddy brown. He stared fervently at the pale face mocking him with its height and presence.&nbsp</p>

  
<p>In this moment, the boy would come to recognize the red moon as the first of many things in this world as utterly and irrecoverably wrong.</p>

  
<p>The sky should be filled with a navy so deep the stars shone through like lanterns in a forest. A blue like the deepest lakes and the richest dyes.&nbsp</p>

  
<p>Not weeping with **< span class="redglow"> bloody light</span>**.</p>

**< /ul>**  
**< /ul>**

<p> </p> **< /div>**

* * *

* * *

* * *

**Jump to** Inspired by: How to Make a "Choose Your Own Adventure" Fic by La_Temperanza 

* * *

**Chapter 1**

**YEAR 30,000**

**ONE-HUNDREDTH YEAR AFTER THE DEATH OF PRINCESS ZELDA THE LAST**

**THIRD MONTH OF AUTUMN**

** Wake up. **   
  


His body sensed the oppressive cold before anything else. It lapped at his body in a viscous liquid while frosty air caressed his face.

**Wake up! **

**[Sleep...](https://archiveofourown.org/) **

Despite this, he attempted to stand. The liquid fell away from him and pooled back into the container with echoing slaps. His efforts were met with a hard knock to the head and his foot slipping on slick grime. 

Now on the floor, he could see nothing even with his eyes wide open. The distortion of black around him was inherently unnerving. 

Something with small, moving legs touched his foot and the boy’s cries assaulted his ears. In an effort to flee, his hand walked onto something smooth that immediately lit the small rocky cavern and decorated tub in blue light!

He didn’t know what it was but he stole the small object’s light and kept it near his beating chest. 

Something like water crawled down from his damp hair and onto his back.

The blue light flickered and the boy decided he didn’t want to be in a place where his toes were red and numb, and his breaths reverberated like the world’s only noise. 

His fingers slid over jagged edges and bled raw but he followed the tantalizing scent of fresh air through the cave’s crevasses. 

The rocks relaxed into an open cave mouth where the boy craned his neck at the red night sky. It bathed the wilting forests in blood like light and dyed their leaves a muddy brown. He stared fervently at the pale face mocking him with its height and presence. 

In this moment, the boy would come to recognize the red moon as the first of many things in this world as utterly and irrecoverably wrong.

The sky should be filled with a navy so deep the stars shone through like lanterns in a forest. A blue like the deepest lakes and the richest dyes. 

Not weeping with bloody light.




The boy took a step down steep rocks, but tiny pebbles that he had not disturbed raced in front of him. He looked behind him and traced the shadowed rocks until his eyes landed on the swirling patterns of purple. They highlighted the spider-like creature with their center point being a glowing red eye that locked onto him.

Its approaching steps brought forth a primal fear, and he stepped backward. His legs wavered and slipped and it might have been the only thing that saved his life. The spider creature’s eye erupted with a searing light that threw itself into the trees below. Without it touching him he felt the burning heat pass by his arm. An explosion of sound stirred him to throw himself down the slope as fast as he could possibly run.

Hiding between trees would not stop the preditor from advancing and in his fear he gripped the smooth slate like a lifeline.

The creature hummed with beeps and another blue beam seared past his back. The concussive force of the explosion caused him to stumble, but he ran on until the trees gave way to an open field. 

He wasted time staring down his death and the next explosion ripped him off of the ground. He bounced and slapped the ground. Rolling and rolling until his body rolled into a hole that contorted his limbs and scraped his skin until he surrendered blood.

He slid to a stop. Eyes as wide and pale as the moon, the boy looked through the towering dirt walls and up at the night sky. The entrance to the surface could be blocked with the palm of his hand and it should have concerned him more, but instead he felt resigned sorrow. He had a period of respite from the monster, and he spent it laying in pain in a bone-chilling puddle of mud. 

His breaths came out in shudders. The tears were the only thing of warmth he could focus on. Not even holding the flickering blue light could erase the dark thoughts pervading his mind. The little boy didn’t understand why he had to hurt, so he wailed and snarled and spat on the earth that drank the blood from his wounds. And he cried until he couldn’t convince himself to shed another tear. 

And when his own noise wasn’t all-consuming, he felt the cold caress his body. He wanted to escape this hole, but the slick walls fell apart in muddy clumps. 

He resigned himself to crawling through roots with the tablet flickering uselessly in his hands.

He was hungry.

He was cold.

He could barely hold his eyes open; they felt so swollen. 

But he let the pain move him forward until the roots gave way to jagged stone planted in the dirt. The foxhole had opened up into a hallowed section of stone with the outside world in clear view. He looked down the jagged edge at the ground so far away it seemed to twist. Whatever stone architecture he was standing on, it wrapped its way around the cliff wall until it disappeared around the bend.

Farther out, the moon had faded into the skyline, and he knew intrinsically that it would be the sun’s turn to grace the sky. The boy, of course, could not fathom how he knew such information. But he knew after some consideration that the shadows of the wilted trees would grow long before the golden orb would reach its peak. 

He stood there, looking out at the world and expecting it to lie to him but his predictions held true. And like a golden fish peeking its head through the surface of the water, the sun rose in brilliant fashion and cast its light upon the hideous landscape. 

In the dark, the trees had appeared nothing more than whithered by winter’s embrace. But in the daylight he saw their trunks spotted with black, being consumed by tar-like, tumorous grows. Far to his right, everything stretching up to the hills was flooded. The water wrapped around trees and mounds of yellow grass as though they were islands, and in its currents swam globules of the tar, soiling the water a deep brown. Watching over it all, the glowing, red mountain spewed black smoke into the air. 

It felt gut-wrenchingly wrong and he didn’t know why. 

Like seeing a phantom of a memory the hazy ruins on the horizons rose up in his mind’s eye as the shape of a glorious castle with spires that touched the heavens. He blinked and the beauty was gone, replaced by a pile of ash and stone. 

He clutched the tablet and made his way down the stone wall, pressing his feet along the jutting edges. The last jump down ended with crumpled legs. He rolled down the flat slate, the abrasive stone eating at him as he went.

He was face-first in the muddy ground before he forced his arms under him and took off with the black, reflective tablet tucked between his arms.

Out in the open, the boy felt more than just naked. The wind blew across his body and the consumed trees dressed the plains with an ominous atmosphere that made him hurry to keep walking. The smell of poison crawled up his nostrils and he gagged. Nothing was alive here. Not the trees nor the grass. Not even birds dared to soar. 

He kept walking and walking, attempting to distance himself from the tar and the bubbling waters that emanated the most foul.

He walked until his feet bled and again until thirst brought him to his knees and his face to the ground where he swallowed dirtied water that disturbed his insides.

He walked until the moon’s pale grin barred his path with darkness, and he was forced to hide in the hovel of tree roots lest he find himself falling into the shadows.

He massaged his aching feet and considered how he knew what shoes where but not why. He knew what clothes were and that he didn’t have them. But not how to make them or where to obtain them. Only that people made them. People that weren’t here. 

The more he considered his situation, the more the questions grew and spun their own trails of impossibilities. Perhaps he was left in that cave on purpose? To die. Maybe he was a mistake; who would leave him in this terrible world otherwise? The thoughts crowded his mind until they brought him to tears and it was left to the sun to dry his eyes.

With the light came newfound determination to keep walking in one direction: forward. 

Logic determined he couldn’t be the only person in the world. The rot that wasted the land didn’t extend past the edge of the valley. If life existed then surely it would be there.

However, that optimism didn’t make the journey any more bearable. The ground still hurt and his stomach still fought for control, but he maintained his efforts, not daring to look back at the pitiful distance traveled. 

His time was filled with passing remnants of man-made structures and their items of contextless nature. He filled his brain with names and could only guess at their purpose. 

His fingers ran over dusty wooden structures half collapsed as rotted lumps. Empty jars and jars with rancid mush. Two chairs were tucked into an undisturbed table as though a peaceful snapshot out of time. He moved on and didn’t look back. 

The sun set.

The moon rose.

And hunger blinded him. By the next day, he hadn’t even realized what he was doing before his nose had led him between trees still blushing with autumn leaves. He chased a salty smell that made his mouth salivate, and he looked in wonder at the two red men with flapping ears who were smoking something over a fire.

The smell sang to him and he listened, unsure if he was more excited to eat or to speak with living creatures. With a rasping voice, he mouthed sounds that should have been words, but the pig men heard him either way.

Their ears twitched and they shot up in excited squeals. The boy greeted them with a smile, hope flying above the sky. They raced to greet him with pointed sticks in their hands. 

Not understanding, he stepped back, and the red man offered him the point of the spear. It collided with his intestines. Again they held out the spear, taking the blood of his shoulder as payment.

The boy fell to his knees in crippling pain and hopeless fear. 

* * *

CSS

* * *
    
    
    #workskin .blueglowlink {
      text-shadow: .5px .5px 1px #0033cc , -.5px -.5px 1px #0033cc;
      text-size: 100em;
      color: #00FFFF;
    }  
    
      
    
    
    
    
    #workskin .storycontainer {
      margin: 0 auto;
      overflow: hidden;
      width: 100%;
      height: 1000px;
      margin-bottom: 50px;
    }
    
    #workskin .page {
      margin-top: 25px;
      height: 1000px;
      overflow-y: auto;
    }
    
    #workskin .page::-webkit-scrollbar {
      -webkit-appearance: none;
      display: none;
    }
    
    #workskin .page::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .page::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .page::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 2px solid #ffffff;
    }
    
    #workskin .page::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #ffffff;
    }

* * *

HTML

* * *

**< div class="storycontainer">**

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

**< div class="page">**

<p>  
**< a name="pageone" rel="nofollow" id="pageone"></a>**  
</p>

<p align="center">  
**< span class="blueglowlink"><strong> <a href="#pagetwo" rel="nofollow">** Wake up. **< /a> </strong> </span><br />**  
<br />  
</p> **< /div>**

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

**< div class="page">**

<p> **< a name="pagetwo" rel="nofollow" id="pagetwo"></a>** </p>

<p align="center">His body sensed the oppressive cold before anything else. It lapped at his body in a viscous liquid while frosty air caressed his face.</p>

<p c **lass="blueglowlink"** align="center">  
<strong> **< a href="#pagethree" rel="nofollow">** Wake up! **< /a>** </strong>  
</p>

<p **class="blueglowlink"** align="center">  
<strong> **< a href="https://archiveofourown.org/" rel="nofollow">**Sleep... **< /a>** </strong>  
</p> **< /div>**

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

**< div class="page">**

<p>  
**< a name="pagethree" rel="nofollow" id="pagethree"></a>**  
</p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p></p><div class="opacity5">

<p>Despite this, he attempted to stand. The liquid fell away from him and pooled back into the container with echoing slaps. His efforts were met with a hard knock to the head and his foot slipping on slick grime. </p>

<p>Now on the floor, he could see nothing even with his eyes wide open. The distortion of black around him was inherently unnerving. </p>

<p>Something with small, moving legs touched his foot and the boy’s cries assaulted his ears. In an effort to flee, his hand walked onto something smooth that immediately lit the small rocky cavern and decorated tub in <span class="blueglow">blue light</span>!</p><ul class="blueglow">

<p>He didn’t know what it was but he stole the small object’s light and kept it near his beating chest. </p>

<p>Something like water crawled down from his damp hair and onto his back.</p>

<p> The blue light flickered and the boy decided he didn’t want to be in a place where his toes were red and numb, and his breaths reverberated like the world’s only noise. </p>

<p>His fingers slid over jagged edges and bled raw but he followed the tantalizing scent of fresh air through the cave’s crevasses. </p><ul class="bluetoredglow">

<p>The rocks relaxed into an open cave mouth where the boy craned his neck at the red night sky. It bathed the wilting forests in blood like light and dyed their leaves a muddy brown. He stared fervently at the pale face mocking him with its height and presence. </p>

<p>In this moment, the boy would come to recognize the red moon as the first of many things in this world as utterly and irrecoverably wrong.</p>

<p>The sky should be filled with a navy so deep the stars shone through like lanterns in a forest. A blue like the deepest lakes and the richest dyes. </p>

<p>Not weeping with<span class="redglow"> bloody light</span>.</p></ul>  
</ul></div>  
<p> </p>  
<p> </p>  
<p> </p>  
<p> </p>  
<p> </p>  
<p> </p>

<p class="goldtitle" align="center">  
<strong>Chapter 1</strong>  
</p>  
<p> </p>  
<p> </p>

<p>INSERT WORDS HERE</p>

<p> </p></div>

**< /div>**

**Notes for the Chapter:**

> Tester.


	4. Text/Picture Change on Hover

Inspired by/From: [How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) ](https://archiveofourown.org/works/10957056) by La_Temperanza

* * *

I've put the return1 bookmark right here.

**(This is a personal reference for me. It's from their fic ^^^)**

<a name="return1" id="return1"></a> ( **Creates a link name. Return1 can be changed to anythig.**

< **a href="#return1"** class="hovertext1"> <span class="hide"> _Text with Creator's Style turned off_ </span> **< /a> **

( **a href creates a link address, a URL so to speak.)**

( **Class="" determines what this link looks like)**

..................................

<span class="hide"><sup>[ < **a href** ="#note1"> _Click this if hover effect is disabled_ **< /a>** ]</sup></span>

( **Creates an invisible link that looks like a footnote. Only visible on "hide creator's style")**

<p class="hide">

<a name="note1" id="note1">< **Instead of a hover-over, this creates an extra footnote with a return to text link. Make sure the hrefs match their locations.** <sup>[<a href="#return1" title="return to text">return to text</a>]</sup>

</p>

* * *

**Changing Text on Hover**

* * *

HTML+Example

* * *
    
    
    <p class="Ch-13-bluheader-change"></p>

THIRD MONTH OF AUTUMN
    
    
    <a name="return1" id="return1"></a><a href="#return1" class="hovertext1">
    
    
    <a name="return1" id="return1"></a><a href="#return1" class="hovertext2">
    
    
    <a name="return1" id="return1"></a><a href="#return1" class="hovertext3">

<a name="return1" id="return1"></a><a href="#return1" class="hovertext4">
    
    
    <a name="return1" id="return1"></a><a href="#return1" class="hovertext5">

* * *

**CSS**

* * *
    
    
    #workskin .Ch-13-blueheader-change:after {
      content: "THIRD MONTH OF AUTUMN";
      color: #4bbec4;
      text-shadow: 0px .5px 0px black;
      text-align: right;
      font-weight: bold;
      font-size: 1.1em;
      font-family: Georgia,Times,Times New Roman,serif;
      border-radius: 2px;
      border-right: 10px solid #fad384;
      padding-right: 15px;
      transform: skewY(-.3deg);
      margin: 0px auto;
      transition: .2s;
      transition-delay: 2s;
    }
    
    #workskin .Ch-13-blueheader-change:hover:after {
      content: "TOMORROW...";
      transition: .1s;
    }
    
    
      
    
      
    
      
    
      
    
    #workskin a.hovertext1:after { content: 'Hovertext1.'; } #workskin a.hovertext1:hover:after, #workskin a.hovertext1:focus:after { content: 'Base and hover uses after'; display: inline; background-color: #FFF; color: #2a2a2a; border-bottom: 1px solid #FFF; position: relative; margin: 0px; padding: 0px; }  
    
      
    
      
    
    #workskin a.hovertext2:before { content: 'Hovertext2'; } #workskin a.hovertext2:hover:after, #workskin a.hovertext2:focus:after { content: 'Base class uses before, Hover class uses after'; display: inline; background-color: #FFF; color: #2a2a2a; border-bottom: 1px solid #FFF; position: relative; margin: 0px; padding: 0px; }  
    
      
    
      
    
    #workskin a.hovertext3:after { content: 'Hovertext3'; } #workskin a.hovertext3:hover:before, #workskin a.hovertext3:focus:after { content: 'Base class uses after, Hover class uses before'; display: inline; background-color: #FFF; color: #2a2a2a; border-bottom: 1px solid #FFF; position: relative; margin: 0px; padding: 0px; }  
    
      
    
      
    
    #workskin a.hovertext4:after { content: 'Hovertext4'; } #workskin a.hovertext4:hover:after, #workskin a.hovertext4:focus:after { content: 'This uses the bare minimum of just a content change.'; }  
    
      
    
      
    
      
    
    #workskin a.hovertext5:after { content: 'Hovertext5'; }
    
    
    #workskin a.hovertext5:hover:after,
    #workskin a.hovertext5:focus:after {
      content: 'Propeller';
      display: block;
      position: relative;
      color: red;
      font-weight: bold;
      font-size: 5em;
      text-decoration: none;
      text-align: center;
      margin: auto;
      background: radial-gradient(circle, rgba(0,180,255,1) 18%, rgba(0,161,255,1) 52%, rgba(255,0,0,1) 77%, rgba(70,243,252,1) 100%);
      border-radius: 50px;
      max-width: 75%;
      box-shadow: 5px 5px 10px yellow, -5px -5px 10px yellow;
      transition-delay: color 7s;
      transition-timing-function: ease-in-out;
      transition: text-align 2s, font-size 2s, color 3s, font-size 5s, background 5s, -webkit-transform 30s, -moz-transform 30s, -ms-transform 30s, -o-transform 30s;
      -webkit-transform: rotate(-360000deg);
      -moz-transform: rotate(-360000deg);
      -ms-transform: rotate(-360000deg);
      -o-transform: rotate(-360000deg);
    }  
    
      
    
    
    
    
    #workskin .hide {  
    
    display: none;  
    
    }

* * *

* * *

* * *

**Changing Pictures on Hover**

  


* * *

**HTML-** Make sure imagecontainer has font-size: 0; or else Ao3 will fuck up it's placement with its addiction to spaces.

* * *

**< div class="imagecontainer">**

  
<div class="imagebase">  
<p><img class="mobileimage400" src="https://live.staticflickr.com/65535/49729101013_b8f888ac2a_z.jpg" width="400" /></p>  
</div>

  
<div class="imagechange">  
<p><img class="mobileimage400" src="https://live.staticflickr.com/65535/49729102168_883503486b_z.jpg" width="400" /></p>  
</div>

  
**< /div>**

* * *

**CSS**

* * *
    
    
    #workskin .imagecontainer {
      position: relative;
      font-size: 0;
    }
    
    #workskin .imagebase {
      position: relative;
    }
    
    #workskin .imagechange {
      position: absolute;
      top: 0;
      opacity: 0%;
      transition: 1s;
    }
    
    #workskin .imagechange:hover {
      opacity: 100%;
      transition: .5s;
    }
    
    
    #workskin .mobileimage400 {
      width: 400px;             ( **Needs to be the same width as the picture in HTML)**
      max-width: 100%;
    }

* * *

OR

* * *

**HTML**

* * *

<p class="frownandsmile">&nbsp</p>

* * *

 **CSS** \- This method fucks with the spacing of the image between text.

* * *
    
    
    #workskin .frownandsmile {
      background: url(https://live.staticflickr.com/65535/49729101013_b8f888ac2a_z.jpg)  no-repeat;
      background-size: contain;
      min-height: 600px;
    }
    
    #workskin .frownandsmile:hover {
      background: url(https://live.staticflickr.com/65535/49729102168_883503486b_z.jpg)  no-repeat;
      background-size: contain;
      min-height: 600px;
    }


	5. Changing Ao3's Preset Fic Headers: Author Notes/Summaries/Titles/etc.

**Summary for the Chapter:**

> Tester Summary

**Notes for the Chapter:**

> Tester Notes

If you want to change how the "visited" link appears, a similar element also has to exist on a.link . This is so the visited page has something to change from.

* * *

#workskin a.link { ( **This changes ALL links, anywhere in your fic)**

 **(display: none; is also an option)**  
position: relative;  
left: 5px;  
background: radial-gradient(circle, rgba(0,180,255,1) 18%, rgba(70,243,252,0.7729885057471264) 25%);  
border-radius: 10%;  
border-color: red;  
border-width: 10px;  
font-size: 2em;  
font-weight: bold;  
font-family: Candera;  
text-shadow: 2px 2px 5px yellow;  
box-shadow: 5px 5px 5px black;  
padding: 10px;  
padding-left: 10px;  
padding-right: 10px;  
transition: 2s;  
}

#workskin a:visited { ( **Links that have been visited)**  
color: gold;  
border-color: pink;  
}

#workskin a:link:hover {  
color: red;  
font-size: 2.5em;  
transition: 1s;  
}

#workskin a:active { ( **Liks that are being hold-clicked)**  
color: white;  
transition: color 2s;  
}

* * *

* * *

* * *

**Inspired by/from "[How to Override the Archive's Automated Chapter Headers](https://archiveofourown.org/works/16737931)" by C Ryan Smith (AiedailEclipsed)**

* * *

**Removes ALL Chapter Names (Ie: Changing Ao3's Preset Headers)**
    
    
    #workskin .chapter.preface.group .title {
      visibility: hidden;
      line-height: 0;
    }  
    
      
    
    **or**  
    
      
    
    #workskin h3.title {         _**(Why is this different? CSS has different ways or identifying/addressing certain things. This is just another route.**_  
    
    display: none;  
    
    }  
    
      
    
    

**Removes Specific Chapter Names**
    
    
    #workskin _**#chapter-2**_ .chapter.preface.group .title { _**(Important to know the specified #chapter-number. It corresponds directly to the number you think it does, but if you're curious you can see this number in a web browser's "Inspect" mode.))**_
      visibility: hidden;
      line-height: 0;
    }

or

#workskin **#chapter-** 1 h3.title {  
diplay: none;  
}

**After Removing Chapter Names, They Can Be Replaced with:**
    
    
    #workskin #chapter-2 .chapter.preface.group .title **::after** {             ( _ **Note that the most important aspect of this is ::after and content: "";  They go hand in hand)**_
      content: "This is an example.";
      visibility: visible;                 ( _ **In CSS, there are a bunch of ways to make somethin invisible. Some include: opacity; font-size: 0; display: none; )**_
      line-height: 1em;
      display: block;
    }  
    
      
    
    _( **Note, that you can also change most visual aspects about the text, backgrounds/colors/etc.)**_

* * *

* * *

**Some other things you might want to change**

* * *

**Changes All Author/Username Links to Profile (Add #chapter-? to specify which)**

**Ie: InfinitysWraith**
    
    
    #workskin .preface.group .byline.heading a {
    }  
    
      
    
    

* * *

**Changes All Chapter Names (Add #chapter-?)**

**Ie: "Changing Ao3's Preset Fic Headers"**
    
    
    #workskin .chapter.preface.group .title {
    }  
    
    

**Changes All Chapter Links (Add #chapter-?)**

**(Note: this is not the same as chapter title/name. This refers specifically to the linkable Chapter 1-? Links have to be treated differently and are referred to as "a")**
    
    
    #workskin .chapter.preface.group a {
    }  
    
      
    
    

* * *

**Changes the Fic Title:**

**IE: CSS in testing. (Only applicable to all chapters. Unconfirmed).**

**(Note: The Fic title is a bit more finicky to work with than other things. I found it didn't really work with ::after+content: ""; ?)**
    
    
    #workskin h2.title {
    }  
    
      
    
      
    
    _**OR:**_
    
    
    #workskin .preface.group h2.title {
    }  
    
      
    
      
    
    

**Mine: Note, I use archive.org and AO3 doesn't like there to be "spaces" in the uploaded picture's name? They get replaced with % and I guess Ao3 won't accept them? If you work with Archive, be prepared to do some fiddling to get the URL(); to work. (I'm not sure what the exact problem is, but to counteract this, when I'm filling out their description/title/tags etc I make everything one word.)**
    
    
    #workskin .preface.group h2.title {
      background-image: URL(https://archive.org/download/bleedgoldylarge/BleedGoldYLarge.png);    
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 0;
      height: 150px;
      transition: 5s;
    }
    
    #workskin .preface.group h2.title:hover {
      background-image: URL(https://archive.org/download/bleedgoldblarge/BleedGoldBLarge.png);
      transition: 1s;
    }  
    
      
    
      
    
    

* * *

**Changes ALL Fic Summaries**
    
    
    #workskin .summary.module {  
    
    (  
    
      
    
    _**MINE:  
    
    **_  
    
    #workskin .summary.module {
      position: absolute;
      height: 400px;
      color: gold;
      letter-spacing: -7px;
      writing-mode: vertical-lr;
      text-orientation: upright;
      transform: skew(10deg, 0deg);
    }  
    
    

**Changes the word "Summary" (You can put this in the same code separated by a comma.)**
    
    
    #workskin .summary.module h3.heading {
    }

**Changes the text in the summary sections**
    
    
    #workskin .summary.module .userstuff {
    }  
    
      
    
      
    
    

**Note: As far as I can tell the Chapter 1 fic summary is NOT the same as summaries in other chapters. In the code it is located BEFORE #chapter-?. This means we can not write "#workskin #chapter-1 .summary.model" . In order to effect Chapter 1, we must change ALL the summaries. Hence the code above.**

**What if you want different summaries for each chapter? Well, you'll have to change them individually.**

**we can do something like :**
    
    
    #workskin #chapter-2 .summary.module, #workskin #chapter-3 .summary.module, #workskin #chapter-4 .summary.module {
      position: relative;
      height: 300px;
      color: green;
      letter-spacing: 0px;
      writing-mode: horizontal-lr;
      text-orientation: sideways;
      transform: none;
    }

**But keep in mind that chapters 5,6,7---? will still look like chapter 1. Also, for them to look completely different, you have to counteract all the code foud in ".summary.model".**

* * *

**Changes both "See end of chapter for more notes" (Add #chapter-? to both)**
    
    
    #workskin .notes.module .userstuff+p,
    #workskin .notes.module .userstuff+p a {
      font-size: 0;    _**(I've chosen to "remove" mine)**_
    }

**Changes the "(See end of chapter for )"**
    
    
    #workskin .notes.module .userstuff+p {       _**(Note: .userstuff+p in css says to select any paragraphs that occur AFTER the user's stuff.)**_  
    
    }

**Changes the " more notes**" **(It's a link so it needs to be treated separately)**
    
    
    #workskin .notes.module .userstuff+p a {  
    
    }  
    
      
    
      
    
      
    
    

* * *

**Changes the text within the Notes Section**
    
    
    #workskin .notes.module .userstuff {
      color: red;
    }  
    
    

**Changes the word "Notes" in all chapters (This is just if you want to change the colors etc.)**
    
    
    #workskin h3.heading {  
    
    }  
    
    

**Changes/Replaces the Word "Notes" (I've replaced it with an image.)**
    
    
    #workskin .notes.module h3.heading {    _( **This is the same location as the one above, just more specific.)**_
      visibility: hidden;
    }
    
    #workskin .notes.module h3.heading::after {
      display: block;
      height: 30px;
      width: 250px;
      max-width: 100%;
      background-image: URL(https://archive.org/download/Kooloolimpah/Kooloolimpah.png);
      content: "";
      border: 0;
      visibility: visible;
      margin: 0 auto;
    }  
    
      
    
    

**Changing the word "Notes" in Top Notes and End Notes separately (add #chapter-?)**

**(Just using .notes.module will select both top and bottom. To counteract this both .notes.module and .end.notes.module must selected. In this case I'v chosen to remove the top "Notes" but keep the bottom "Notes".)**
    
    
    #workskin .notes.module h3.heading {
      display: none;
    }
    
    
    #workskin .end.notes.module h3.heading {
      display: block;
    }

* * *

**Changes the Background on All Chapters (Add #chapter-?)**
    
    
    #workskin .userstuff.module {   
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg, rgba(156,112,72,1) 13%, rgba(79,162,168,0.4885057471264368) 36%, rgba(10,103,111,0) 77%);
    }

* * *

* * *

* * *

**Changing Section dividers**

**HTML: Name the classes whatever**

<hr class="hry" />

<hr class="hr" />

**CSS:**
    
    
    #workskin .hr {
      height: 30px;
      width: 250px;
      max-width: 100%;
      background-image: URL(https://archive.org/download/Kooloolimpah/Kooloolimpah.png);
      border: 0;
      top: 0;
    }
    
    #workskin .hry {
      height: 30px;
      width: 250px;
      max-width: 100%;
      background-image: URL(https://archive.org/download/kooloolimpah-y/KooloolimpahY.png);
      border: 0;
    }

* * *

**Bonus if you feel like cursing yourself XP**
    
    
    #workskin ul.chapter.actions {
      display: none;
    }

* * *

**Bonus, an off-white "Rich Text Editor. Place this into your "Site Skin" NOT the "Work Skin"**
    
    
    #content_ifr {
      background: #f2f0e4;
    }
    
    .tox-toolbar {
      background: #8a887b !important;
    }
    

* * *

**As with most things, you can add your own colors an alterations to these areas. a:links has the most rigidity in what can be changed. If you want to locate specific areas to change you can go on a desktop browser, right-click, hit inspect, and it'll bring up the codes used. Everything from below the tags and stats box, to just above the kudos and comments buttons can be changed. You can even change backgrounds for .preface.group**

**Notes for the Chapter:**

> Tester Notes End


	6. Sliding Door Animation

Extra words

Create space

This was needed so there'd be enough "space" for the "doors" to slide away into.

Also, In order for the animation to work on desktop, you have to actually follow the doors with your mouse. Haven't yet figured out something that counteracts this.

**Words!**

His body sensed the oppressive cold before anything else. It lapped at his body in a viscous liquid while frosty air caressed his face.

**Wake up! **

  


* * *

HTML

* * *

_**< div class="doorcontainer">** _

**< div class="doorinteriorcontainer">**

<p align="center">  
<span class="goldtitle"> <strong>Words!</strong></span>  
</p>

<p align="center">His body sensed the oppressive cold before anything else. It lapped at his body in a viscous liquid while frosty air caressed his face.</p>

<p class="blueglowlink" align="center">  
<strong><a href="#ThisPageDoesNotExist" rel="nofollow"> Wake up!</a> </strong>  
</p>

**< /div>**

**< div class="rightdoor">** **< /div>**

**< div class="leftdoor">** **< /div>**

**< div class="middledoor">**

<p><br />  
<img class="mobileimage400" src="https://archive.org/download/testing-lip-sync/Animation%20Test%20Words.gif" width="400" />  
</p>

< **/div >**

_**< /div>** _

* * *

CSS

* * *
    
    
     **This creates the general size constraints.**  
    
      
    
    #workskin .doorcontainer {
      position: relative;
      background-color: rgba(114,193,195,1);
      border: 1px solid black;
      height: 500px;
      width: 400px;
      max-width: 100%;
      overflow: hidden;
      margin: 0 auto;
    }  
    
      
    
    **This allows there to be a margin inside the container.**
    
    #workskin .doorinteriorcontainer {
      position: absolute;
      vertical-align: top;
      top: 0px;
      left: 0px;
      border: 1px dashed black;
      overflow: auto;
      margin: 15%;
    }
    
    #workskin .leftdoor {
      position: absolute;
      vertical-align: top;
      top: 0px;
      left: 0px;
      border: 1px solid black;
      border-radius: 1px;
      border-color: black;
      background: rgb(102, 102, 153);
      box-shadow: 1px 1px 2px black;
      max-width: 50%;
      width: 200px;
      height: 490px;
      transition: 5s;
      transition-delay: 20s;
      z-index: 3;
    }
    
    #workskin .leftdoor:hover {
      background: #52527a;
      cursor: progress;
      top: -10px;
      left: -45%;
      transition: top .5s, left 4s;
      transition-delay: left 4s;
    }
    
    #workskin .rightdoor {
      position: absolute;
      vertical-align: top;
      top: 0px;
      right: 0px;
      border: 1px solid black;
      border-radius: 1px solid black;
      background: rgb(102, 102, 153);
      box-shadow: -1px 1px 2px black;
      max-width: 50%;
      width: 200px;
      height: 490px;
      transition: 3s;
      transition-delay: 20s;
      z-index: 2;
    }
    
    #workskin .rightdoor:hover {
      top: -5px;
      width: 10px;
      background: #52527a;
      transition: ease-in-out 2s;
      transform: skewY(40deg);
      cursor: progress;
    }
    
    #workskin .middledoor {
      position: absolute;
      vertical-align: top;
      top: 0px;
      right: 0px;
      border: 1px solid rgba(255, 255, 0, 0);
      border-radius: 1px solid black;
      background: rgb(202, 202, 153);
      box-shadow: -1px 1px 2px black;
      max-width: 100%;
      width: 400px;
      height: 490px;
      transition: 4s;
      transition-delay: 20s;
      z-index: 1;
    }
    
    #workskin .middledoor:hover {
      background: #ffffe6;
      cursor: progress;
      border-bottom: 300px solid #ffff00;
      top: -780px;
      transition: 4s;
    }  
    
      
    
      
    
    **Transform: translate(0px, 0px,); can also be used to move things, but I've had some trouble with the timeing features.**  
    
      
    
    **Transition-delay: ?s; can be exaggerated to some inane amount of seconds. Why do this? AO3 said I couldn't create "click events", so I said fuck that. Setting transition-delay on the return/base element to something like 10min can effectively "fake" a permanent action.**

**Backgrounds can also be replaced with images as:**

**background-image: URL(https///wwaofugiwrihnjdhuoaf);**


	7. Not a Grid

spacer text

.

..

...

.

..

...

.

..

...

Spacer text

* * *

HTML: Note that the P spaces can distort the spacing between your containers. This happens sometimes when you move over to rich text.

* * *

**< p></p><div class="grid">**

**< p></p><div class="gridcontainer">**

<p></p><div class="gridcontainer1">

<p></p></div><div class="gridcontainer2">

<p></p></div><div class="gridcontainer3">

<p></p></div> **< /div>**

**< p></p><div class="gridcontainer">**

<p></p><div class="gridcontainer1">

<p></p></div><div class="gridcontainer2">

<p></p></div><div class="gridcontainer3">

<p></p></div> **< /div>**

**< p></p><div class="gridcontainer">**

<p></p><div class="gridcontainer1bot">

<p>You can put text here but you need to change font-size: from 0 to whatever px you want. like 16px. Add this new font size to the gridcontainer1-3, otherwise, due to Ao3's space addiction, your spacing will be messed up.</p></div><div class="gridcontainer2bot">

<p>..</p></div><div class="gridcontainer3bot">

<p>...</p></div>< **/div >**

< **p > </p></div>**

* * *

**CSS:** This is the ugliest thing I've ever made 0.o Ao3, for whatever the reason, doesn't allow you to manage grid rows. So I said fuck that. This is a jerry rig of a bunch of boxes that kind of make up a grid.

* * *
    
    
    #workskin .grid {       ( **This is used to round up all the grid containers, and make a buffer between the text.)**
      position: relative;
      height: 300px;        ( **Set height and Width to whatever)**
      width: 300px;
      max-width: 100%;
      margin: 0 auto;  
      font-size: 0;         ( **This is important!. Ao3 has a tendency to add unnessesary spaces in the HTML. To proactively counter this, I've marked the font-size as 0/nothing so that the extra spaces are invisible. If you want to add text, you must add a new font-size somewhere else.)**
    }
    
    #workskin .gridcontainer {   ( **This is a "Row". It's set as a grid with 3 columns.)**
      display: grid;
      width: 300px;
      max-width: 100%;
      height: 100px; 
      grid-template-columns: 1fr 1fr 1fr;           ( **This creates the columns. 1 fraction. Add more for more columns)**
    }  
    
      
    
      
    
    .  
    
    .  
    
    .  
     **(These make up the individual "cells" for each grid column. 1 is the left most and 3 is the right most cell, with 2 in the middle.)**
    
    
    
    #workskin .gridcontainer1 {
      display: grid;
      grid-column: 1;
      height: 100px;
      background-image: URL(https://live.staticflickr.com/65535/49729642111_a6a93ab167_z.jpg);
      background-size: contain;
      border: solid white;
      transition: 1s;
    }
    #workskin .gridcontainer1:hover {
      background-image: URL(https://live.staticflickr.com/65535/49819940893_9bcab2f940_z.jpg);
      background-repeat: no-repeat;
      border: solid black;
      transition: 0s;
    }
    
    #workskin .gridcontainer1bot {   **(Creating a "bottom" row is technically unnessesary. However, if you want distinctly different cells then you need a new .class for whatever you want.**
      display: grid;
      grid-column: 1;
      height: 100px;
      background: orange;
      border: solid white;
      transition: 1s;
    }
    
    #workskin .gridcontainer1bot:hover {
      background: blue;
      border: solid black;
      transition: 0s;
    }  
      
      
    .......
    
    #workskin .gridcontainer2 {
      display: grid;
      grid-column: 2;
      height: 100px;
      background: pink;
      border: solid yellow;
      transition: 1s;
    }
    
    #workskin .gridcontainer2:hover {
      background: green;
      border: solid blue;
      transition: 0s;
    }
    
    #workskin .gridcontainer2bot {
      display: grid;
      grid-column: 2;
      height: 100px;
      background: lavender;
      border: solid yellow;
      transition: 1s;
    }
    
    #workskin .gridcontainer2bot:hover {
      background: purple;
      border: solid blue;
      transition: 0s;
    }
      
      
    ..........  
      
    
    #workskin .gridcontainer3 {
      display: grid;
      grid-column: 3;
      height: 100px;
      border: solid red;
      background: crimson;
      transition: 1s;
    }
    
    #workskin .gridcontainer3:hover {
      border: solid green;
      background: purple;
      transition: 0s;
    }
    
    #workskin .gridcontainer3bot {
      display: grid;
      grid-column: 3;
      height: 100px;
      border: solid red;
      background: red;
      transition: 1s;
    }
    
    #workskin .gridcontainer3bot:hover {
      border: solid green;
      background: coral;
      transition: 0s;
    }

* * *


	8. It's Not a Webpage- WIP

⬅️

➡️

🔄

🏠

📣

👓

⛨

🚫

♾️

✏️

👍

🔌

♪

👤

⋮

https://noneofyourbusiness.aoeuh037gaogf0472408347908796854758697oadhfoadifhaoeuqyfobqejfbqhguvfcyutgyihjkhbvgcrftgyhj

🔍

★

🔒

▶️ YouTube

✉️ Email

📄 Docs

🏫 This took days

📁 Bookmarks

📖 Kindle

⇛|

📁 Other Bookmarks

Browser Header

Header  
Tabs  
Searchbar

Dropdown

Link 4  
Link 5  
Link 6

Dropdown

Link 7  
Link 8  
Link 9

  


**Header**

**Let's start out with the whole ass container. Nothing Escapes this. This will be the last /div in the HTML. Sizing is flexible to whatever you want. I've made font-size: 0; here so I can preemptively avoid AO3 spacing chaos. Because of this, anytime text needs to be used font-size: ?" has to be specified.**
    
    
    #workskin .webcontainer {
      position: relative;
      display: inline-block;
      font-size: 0;
      width: 100%;
      height: 800px;
      border: 1px solid black;
      background-color: cyan;
      overflow: hidden;
    }

**This webheader contains everything in blue. It's located INSIDE of Webcontainer it's important that is positioned relatively. Currently it more specifically refers to the gray background.**
    
    
    #workskin .webheader {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 115px;
      max-height: 15%;
      background-color: #5f6d78;
      vertical-align: top;
      top: 0px;
    }  
    
      
    
    

**Inside Webheader we have the minimize/expand/close buttons. ::before is used to place the _ 0 X with content: ""; I couldn't figure how else to do this, but you could probably just place a smaller "container" with some padding and HTML text inside.**
    
    
    #workskin .minimize {
      position: absolute;
      height: 15px;
      width: 19px;
      top: 0px;
      vertical-align: top;
      border: 1px solid #8396a6;
      border-radius: 3px;
      background: #5f6d78;
      transition: .2s;
    }
    
    #workskin .minimize::before {
      position: absolute;
      vertical-align: top;
      top: -5px;
      right: 5px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: white;
      content: "_" !important;
    }
    
    #workskin .minimize:hover {
      box-shadow: inset 1px 1px 1px #a7bfd1;
      background: #8396a6;
      transition: .1s;
    }  
    
      
    
      
    
    ....
    
    #workskin .fullscreen {
      position: absolute;
      height: 15px;
      width: 19px;
      left: 20px;
      top: 0px;
      vertical-align: top;
      border: 1px solid #8396a6;
      border-radius: 1px;
      background: #5f6d78;
      transition: .2s;
    }
    
    #workskin .fullscreen::before {
      position: absolute;
      vertical-align: top;
      top: 0px;
      right: 5px;
      font-size: 12px;
      text-align: center;
      color: white;
      content: "O" !important;
    }
    
    #workskin .fullscreen:hover {
      box-shadow: inset 1px 1px 1px #a7bfd1;
      background: #8396a6;
      transition: .1s;
    }  
    
      
    
    .....
    
    #workskin .close {
      text-align: center;
      position: absolute;
      display: block;
      height: 15px;
      width: 29px;
      vertical-align: top;
      top: 0px;
      right: 0;
      border: 1px solid #8396a6;
      border-radius: 3px;
      background: #5f6d78;
      transition: .2s;
    }
    
    #workskin .close::before {
      position: absolute;
      vertical-align: top;
      top: 0px;
      right: 35%;
      font-size: 12px;
      text-align: center;
      color: white;
      content: "X" !important;
    }
    
    #workskin .close:hover {
      background: #e03019;
      box-shadow: inset 1px 1px 1px #d17569;
      transition: .1s;
    }

**Inside Webheader, we have Webheadercustom. This refers specifically to the blue and contains all the apps, bookmarks and searchbar.**
    
    
    #workskin .webheadercustom {
      position: absolute;
      display: inline-block;
      vertical-align: bottom;
      bottom: 0px;
      width: 100%;
      height: 80px;
      background-color: #3dc9d9;
    }  
    
      
    
    .................

**Tabs**

**.tabsbox is inside of Webheadercustom (?????is it?) and is a container box for the tabs. It is positioned relatively and placed on top of/above .webheadercustom.**
    
    
    #workskin .tabsbox {
      position: relative;
      display: inline-block;
      vertical-align: bottom;
      left: 7px;
      top: 10px;
      width: 450px;
      max-width: 60%;
      height: 20px;
      font-size: 12px;
      color: black;
    }

**These are the tabs. They are placed inside of .tabsbox. ::before is used to place the tab text**
    
    
    #workskin .tab1 {
      position: absolute;
      vertical-align: top;
      display: inline-block;
      top: 0px;
      left: 0px;
      width: 150px;
      max-width: 30%;
      height: 20px;
      background: #3dc9d9;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 1px 1px 3px black, -1px, -1px, 3px black;
      text-align: top;
      padding: 5px;
      font-size: 12px;
      color: black;
      z-index: 1;
    }
    
    #workskin .tab1::before {
      position: absolute;
      vertical-align: top;
      top: 5px;
      left: 15px;
      font-size: 12px;
      text-align: center;
      color: black;
      width: 130px;
      height: 15px;
      max-width: 70%;
      overflow: hidden;
      content: "Left Most Tab Box";
    }  
    
      
    
    ....
    
    #workskin .tab2 {
      position: absolute;
      vertical-align: top;
      display: inline-block;
      left: 33%;
      top: 0px;
      width: 150px;
      max-width: 33%;
      height: 25px;
      background: #1c6670;
      border-right: 3px solid #123f45;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      transition: .2s;
      font-size: 12px;
      color: black;
    }
    
    #workskin .tab2::before {
      position: absolute;
      vertical-align: top;
      top: 5px;
      left: 15px;
      font-size: 12px;
      text-align: center;
      color: black;
      width: 130px;
      height: 15px;
      max-width: 70%;
      overflow: hidden;
      content: "Middle Tab Box";
    }
    
    #workskin .tab2:hover {
      background: #2c8e9c;
      transition: .1s;
    }  
    
    .....  
    
      
    
    #workskin .tab3 {
      position: absolute;
      vertical-align: center;
      display: inline-block;
      top: 0px;
      right: 0px;
      width: 150px;
      max-width: 33%;
      height: 25px;
      background: #1c6670;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      transition: .2s;
      font-size: 12px;
      color: black;
    }
    
    #workskin .tab3::before {
      position: absolute;
      vertical-align: top;
      top: 5px;
      left: 15px;
      font-size: 12px;
      text-align: center;
      color: black;
      width: 130px;
      height: 15px;
      max-width: 70%;
      overflow: hidden;
      content: "Far Right Tab Box";
    }
    
    #workskin .tab3:hover {
      background: #2c8e9c;
      transition: .1s;
    }  
    
      
    
    ....  
    
    #workskin .tab4 {
      position: absolute;
      display: inline-block;
      vertical-align: right;
      top: 2px;
      right: -25px;
      width: 20px;
      height: 20px;
      background: #1c6670;
      border-radius: 50%;
      transition: .2s;
    }
    
    #workskin .tab4::before {
      position: absolute;
      vertical-align: top;
      top: -2px;
      right: 3px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: black;
      content: "+" !important;
    }
    
    #workskin .tab4:hover {
      background: #2c8e9c;
      transition: .1s;
    }

**.This is an empty container box that helps position the top row. It contains .movebar, .appbar, and .searchbar. It is located inside of .webheadercustom**
    
    
    #workskin .appandsearchbox {
      position: relative;
      top: 10px;
      height: 27px;
      left: 1.5%;
      width: 97%;
      overflow: hidden;
    }

**This is .movebar. It's a container box and contains the back and forward arrows, refresh and home button. It's located Inside of .appandsearchbox and positioned relatively. The "buttons" are actually placed in the HTML using the class="app".**
    
    
    #workskin .movebar {
      position: relative;
      vertical-align: top;
      padding-left: 5px;
      width: 115px;
      height: 25px;
    }

**Searchbar**

**.searchbar is a container located inside of .appandsearchbox, .searchbartext is used so that I could place the text more accurately.**
    
    
    #workskin .searchbar {
      position: absolute;
      vertical-align: top;
      top: 0px;
      left: 120px;
      right: 125px !important;
      text-align: left;
      max-width: 60%;
      height: 25px;
      background: #b3eef5;
      border-radius: 25px;
    }
    
    #workskin .searchbar:hover {
      background: #ffffff;
      box-shadow: inset 1px 1px 1px #ebc334, inset -1px -1px 1px #ebc334;
      cursor: text;
    }
    
    #workskin .searchbartext {
      position: absolute;
      vertical-align: top;
      left: 35px;
      right: 60px;
      top: -12px;
      font-size: 12px;
      text-align: left;
      color: black;
      max-width: 80%;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 20px;
    }

**Inside of .searchbar we have the locked button, favorite/star button, and the zoom/magnifying glass button. These all had to be place individually.**
    
    
    #workskin .magnifyingglass {
      font-size: 16px;
      position: absolute;
      vertical-align: top;
      display: inline-block;
      top: -18px;
      right: 30px;
      transition: .3s;
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: black opacity 0%;
    }
    
    #workskin .magnifyingglass:hover {
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: #00000020;
      transition: .3s;
      cursor: default;
    }
    
    #workskin .star {
      font-size: 16px;
      position: absolute;
      vertical-align: top;
      display: inline-block;
      top: -18px;
      right: 5px;
      transition: .3s;
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: black opacity 0%;
      color: gray;
    }
    
    #workskin .star:hover {
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: #00000020;
      color: blue;
      transition: .3s;
      cursor: default;
    }
    
    #workskin .locked {
      font-size: 16px;
      position: absolute;
      vertical-align: top;
      display: inline-block;
      top: -18px;
      left: 5px;
      transition: .3s;
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: black opacity 0%;
      color: gray;
    }
    
    #workskin .locked:hover {
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: #00000020;
      transition: .3s;
      cursor: default;
    }

**.These are the Apps. This class is applied to emoji's placed in the HTML.**
    
    
    #workskin .app {
      font-size: 16px;
      position: relative;
      vertical-align: top;
      display: inline-block;
      top: -18px;
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 100px;
      background: black opacity 0%;
      transition: .3s;
      color: gray;
    }
    
    #workskin .app:hover {
      text-align: center;
      width: 25px;
      height: 20px;
      border-radius: 30%;
      background: #00000020;
      transition: .3s;
      cursor: default;
    }

**inside of .appandsearchbox we have .appbar and .appbarbottom.**

**.appbar contains the "plug, music note, user icon, and menu" emoji. It also has an opaque background so it can cover up .appbarbottom.**
    
    
    #workskin .appbar {
      position: absolute;
      vertical-align: top;
      padding-left: 5px;
      top: 0px;
      right: 0px;
      width: 110px;
      height: 25px;
      border-radius: 25px;
      border: solid #17171700 1px;
      font-size: 12px;
      font-weight: bold;
      background-color: #3dc9d9;
      transition: .3s;
    }
    
    #workskin .appbar:hover {
      border: solid #17171720 1px;
      transition: .1s;
    }

**.appbarbottom contains all the misc. apps and moves around beneath the searchbar as the browser expands and contracts.**
    
    
    #workskin .appbarbottom {
      position: relative;
      vertical-align: top;
      padding-left: 5px;
      top: -25px;
      left: 71%;
      height: 25px;
      border-radius: 25px;
      border: solid #17171700 1px !important;
      font-size: 12px;
      transition: .3s;
      overflow: hidden;
    }
    
    #workskin .appbarbottom {
      border: solid #17171720 1px;
      transition: .1s;
    }
    

**...This actually refers to the "bottom bar". It specifically holds the Bookmarks. Topbar is a container box. It is inside Webheadercustom.**
    
    
    #workskin .topbar {
      position: relative;
      vertical-align: top;
      top: 15px;
      left: 1.5%;
      font-size: 12px;
      width: 97%;
      height: 25px;
    }

**.Bookmark functions similarly to .app. This is applied to a class="bookmark" in the HTML. They are just lined up relatively next to each other in the HTML.**
    
    
    #workskin .bookmark {
      display: inline-block;
      vertical-align: top;
      position: relative;
      top: -12px;
      left: 0px;
      max-width: 15%;
      height: 20px;
      padding-right: 5px;
      padding-left: 5px;
      border-radius: 30px;
      text-align: center;
      font-size: 12px;
      color: black;
      transition: .3s;
      overflow: hidden;
    }
    
    #workskin .bookmark:hover {
      border-radius: 30px;
      background: #00000020;
      text-align: center;
      transition: .3s;
      cursor: default;
    }

**.bookmarkside is an empty container that holds 1.app and 1.otherbookmark. It is located inside of .webheadercustom.**
    
    
    #workskin .bookmarkside {
      display: inline-block;
      position: absolute;
      vertical-align: top;
      padding-left: 5px;
      top: -3px;
      right: 0px;
      width: 160px;
      height: 25px;
      border-radius: 25px;
      border: solid #17171700 1px;
      font-size: 2px;
      background-color: #3dc9d9;
      z-index: 1;
      transition: .3s;
    }

**.otherbookmarks functions similarly to .bookmark and .app**
    
    
    #workskin .otherbookmarks {
      position: relative;
      vertical-align: top;
      left: 10px;
      top: -71px;
      text-align: center;
      font-size: 12px;
      width: 130px;
      height: 20px;
      border-radius: 50px;
      transition: .3s;
      color: black;
      overflow: hidden;
    }
    
    
    #workskin .otherbookmarks:hover {
      border-radius: 30%;
      background: #00000020;
      text-align: center;
      transition: .3s;
      cursor: default;
    }

"STARTStop giving me that answer. You fell asleep on watch. You know."  Sheik stood up and checked his belongings for signs of pesky thieves. His brewing supplies

pressed into the dirt. Roan was sleepingENDDEDN.

  


"STATATTRTStop giving me that answer. You fell asleep on watch. You know." The crow was right to spook when Sheik sent Roan's blanket flying. The selfish little twat didn't even wake up until Sheik gave him a sharp kick in his ribs.

"Why are you sleeping?" Sheik accused.

Roan looked around in confusion, "Wha-? I...I don't kn—"

"Stop giving me that answer. You fell asleep on watch. You know." Sheik stood up and checked his belongings for signs of pesky thieves. His brewing supplies were where he left them, his knives and talismans still hidden. But that didn't quell his ire. "If you couldn't stay awake then you should have told me. Instead, I have to wonder how close I came to dying in my sleep."  
He gave up drawing and woke the hairy blanket for his shift.

Roan came into the world drooling, while Sheik struggled to sleep. Forced to keep his own thoughts company, the people at Mount Satori came to mind. They were accompanied by the strangers in the Highlands and the women in the desert. He ran from those thoughts and fell asleep before their screaming.

Sheik awoke to a midafternoon sun. Pale rain clouds drifted by as a bird mocked him with its upbeat tune. A few feet away, a crow investigated Roan. Sheik took in his folded body. A blanket lay draped over his shoulders, but it couldn't hide the face pressed into the dirt. Roan was sleeping.

The crow was right to spook when Sheik sent Roan's blanket flying. The selfish little twat didn't even wake up until Sheik gave him a sharp kick in his ribs.

"Why are you sleeping?" Sheik accused.

Roan looked around in confusion, "Wha-? I...I don't kn—"

"Stop giving me that answer. You fell asleep on watch. You know." Sheik stood up and checked his belongings for signs of pesky thieves. His brewing supplies were where he left them, his knives and talismans still hidden. But that didn't quell his ire. "If you couldn't stay awake then you should have told me. Instead, I have to wonder how close I came to dying in my sleep."

"I'm sorry. I don't...I was awake and then—EAAEFFENDDEDN"

STATRT"Stop giving me that answer. You fell asleep on watch. You know." "No. Your excuses don't matter. Because if you're going to wear her clothes, then you can't sit there and tell me you "don't remember" how Maylin died. And I was awake at the time. Imagine if I hadn't been? Both of us would be sleeping with our faces in the dirt." Sheik brushed past the rest of Roan's apologies.

He rushed through his morning routine and kicked the embers dead as he waited for the aspar on his shoulder to dry. He threw his armor on, tightened the buckled before Roan could properly get to his feet. Of course, Roan chased after. If a lynel didn't stop him, strong words were child's play. Maybe Roan didn't remember the word restraint. If this was going to be a repeat occurrence, then forget Mount Lanayru, he'd get rid of Roan physically if that's what it took.

The hours passed. Sheik attempted to put the matter behind him, but Roan's moping face never left his peripheral. When his feet grew tired trying to make up lost daylight, he thought of Roan’s negligence and his motivation became outpacing the boy. Tolerance, he told himself. Not everyone has to die.

Sheik would have kept walking with his head down, but Lake Hylia appeared in front. Its expansive body of water surrounded by damp cliffs and a poisoned river meant the only way across was its bridge. On its crumbling stones, a sleeping lizalfos lay draped over the center fountain. Even from a distance, its camouflage was poor, the green of its scales bleeding through the gray in multiple patches. It lacked the typical harem, but with their speed, even a single lizalfos posed a threat. If possible, Sheik wanted to avoid confrontation. With that lynel horn in his bag, he stood to gain nothing from a kill.

Seeing no alternative, Sheik put aside some of his irritation and approached Roan. He couldn’t withhold his mocking comment, “We’re going to sneak past. Can I trust you to stay awake?ENDD

**About Stuff** | **Don't Contact Me** | **No Information** | **No Social Media**  
---|---|---|---  
Author | Email | Really there's nothing | Fakstagram  
Yourself | @Hotmail.com | Don't ask me for any | Instant Messenger  
Moiself | @AOL.com | Seriously | Pager#


	9. Invisible Links, Popup Text

**Notes for the Chapter:**

> Oh yeah. It's all coming together.

**Positioned Gif**

Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis erat, quis fermentum nulla lacinia a. Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Nullam sit amet scelerisque lorem. Quisque efficitur bibendum mi, nec dictum tortor euismod eget. Curabitur tellus dui, ullamcorp er sed finibus eu, luctus ac lectus. Duis eu dapibus ante. Curabitur massa tellus, maximus nec bibendum eget, dapibus vitae diam. Curabitur dictum ornare eros, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Remember rule 34.

* * *

**HTML**

* * *

  
<p></p>< **div** class="handhovercontainer">

<p class="invisiblelink" align="center">  
<a href="#1" rel="nofollow">Remember rule 34.</a>  
</p>

<p>  
<img class="handhover" src="https://archive.org/download/hand-hover-short/Hand%20Hover%20Short.gif" width="150" align="right" />  
</p>

<p> </p> **< /div>**

* * *

**CSS**

* * *

**This is so I can position the gif where I want.**
    
    
    #workskin .handhovercontainer {
      position: relative;
      margin: 0 auto;
      max-width: 300px;
    }

**This helps to position the gif in accordance to the contain. z-index: -; is so the gif is not a clickable element on the page.**
    
    
    #workskin .handhover {
      position: relative;
      vertical-align: top;
      top: -22px;
      right: 0;
      max-width: 100%;
      z-index: 0;
    }

* * *

* * *

* * *

**Pop-up Text**

Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis erat, quis fermentum nulla lacinia a. Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Nullam sit amet scelerisque lorem. Quisque efficitur bibendum mi, nec dictum tortor euismod eget. Curabitur tellus dui, ullamcorper sed finibus eu, luctus ac lectus.

I need to wake up.

Yeah, no. That's not going to happen.

* * *

**HTML**

* * *

<p></p>< **div** class="popup">

<p class="popup-precontent">I need to wake up.</p>

<p></p><div class="popup-content">

<p>  
<a href="#answer" rel="nofollow">Yeah, no. That's not going to happen.</a>  
</p></div>

**< /div>**

* * *

**CSS**

* * *

**This is the "container" that holds the popup group.**
    
    
    #workskin .popup {
     **_position: relative;_  ( _this keeps the popup group place within other text)_**
      top: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
    }

**This changes the aesthetic of whatever you want the pop-up text to be.**
    
    
    #workskin .popup-content {
      _**position: absolute;      (this is absolute so that I can specifically move my pop-up where ever I want.**_
      vertical-align: top;
     _**font-size: 0;           (This is important because it makes the pop-up text invisible.**_
      top: -40px;
      width: 100%;
      text-align: center;
      z-index: 1;
    }

**In MY case, my popup content, "Yeah no that's not going to happen" is a link, so it must be changed separately.**
    
    
    #workskin .popup-content a {
      padding: 20px;
      color: #f2be54;
      font-weight: bold;
      font-family: Georgia,Times,Times New Roman,serif;
      text-align: center;
      text-shadow: 0px .5px 10px black, .5px 0px 10px black;
      border-radius: 25px;
      transform: skewY(-1deg);
      text-decoration: none;
      border: none;
    }

**This refers to "I need to wake up" It's purely aesthetic.**
    
    
    #workskin .popup-precontent {
      text-align: center;
    }

**With these ^^ you can change almost any of the aspects, they're all aesthetic. This important thing is that .popup-content is WITHIN the .popup DIV. Also .popup-content needs to be "invisible" before the :hover. To achieve his I've chosen to use font-size: 0; You could also do display: none, opacity: 0, visibility: none. among others. Each of these has different qualities that might work best for your needs.**

**This is the most important part of making a "pop-up".**

**.popup:hover .popup-content { <<This, in code, says "upon hovering over .popup, the computer will then redirect to .popup-content and activate this next line of code". This is achieved by using a space between the two. **
    
    
    _**#workskin .popup:hover .popup-content,**_
    #workskin .popup:hover .popup-content a {
      f **ont-size: 30px;        ( _This makes the pop-up go form invisible to visible)_**
      transition: font-size .2s, text-shadow 5s;
      transition-delay: text-shadow 1s;
      text-shadow: 10px 10px 50px #f2be54, -10px -10px 50px #f2be54, 0px .5px 10px black, .5px 0px 10px black;
    }

**It should also be possible to create pop-ups that use image assets either within the CSS or the HTML.**

* * *

* * *

* * *

**Praise the Sun**

Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Curabitur tellus dui, ullamcorper sed finibus eu, luctus ac lectus. **Praise the sun** Praise the sun! Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus Morbi posuere congue eros eget sollicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Nullam sit amet scelerisque lorem. Quisque efficitur bibendum mi, nec dictum tortor euismod eget. Curabitur tellus dui, ullamcorper sed finibus eu, luctus ac lectus. .

* * *

**HTML- (FYI, AO3 doesn't like haveing multiple spans next to each other, so when you move to Rich Text it'll "reformat"/remove one.**

* * *

<p></p> **< div class="popup-praisethesun">**

<p> _Filler Text......_ Praise the sun _Filler Text...._

<span class="popup-content-praisethesun">Praise the sun!</span>   
<span class="the-sun"></span>

 _Filler Text...._ </p> **< /div>**

* * *

**CSS**

* * *
    
    
    #workskin .popup-praisethesun {
      position: relative;
    }
    
    #workskin .popup-content-praisethesun {
      position: absolute;
      vertical-align: top;
      left: 0;
      bottom: 0;
      font-size: 0px;
      z-index: 1;
      opacity: 0;
    }
    
    #workskin .popup-praisethesun:hover .popup-content-praisethesun {
      left: 20%;
      bottom: 200px;
      width: 200px;
      max-width: 60%;
      color: gold;
      opacity: 100%;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      text-shadow: 10px 10px 100px #f2be54, -10px -10px 100px #f2be54, 0px .5px 10px black, .5px 0px 10px black;
      transition-delay: text-shadow 1s, opacity 3s;
      transition-timing-function: ease-in-out;
      transition: 7s;
    }
    
    #workskin .the-sun {
      position: absolute;
      opacity: 0;
      bottom: 0;
      left: 0;
      width: 0px;
      height: 0px;
      border-radius: 50%;
      background: linear-gradient(127deg, rgba(255,253,106,1) 22%, rgba(255,101,0,1) 100%);
    }
    
    #workskin .popup-praisethesun:hover .the-sun {
      left: 20%;
      max-width: 60%;
      opacity: 100%;
      bottom: 200px;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(255,253,106,1) 22%, rgba(255,223,0,1) 100%);
      box-shadow: 0px .5px 50px 20px yellow, .5px 0px 50px  20px yellow;
      transition-timing-function: ease-in-out;
      transition-delay: opacity .5s;
      transition: 7s;
    }
    

* * *

* * *

* * *

**Invisible Links**

**ONE**

PUZZEL TWO

PUZZEL THREE

1 2 3 4 5 6 7 8 9 0

PUZZEL FOUR

PUZZEL FIVE

TWO

Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis erat, quis fereugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL ONE Fusce aretra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce pien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL THREE Praescu. Phasellus consequat in erat id venenatis. In et odio urna. Aenean sollicitudin elementum laoreet.

egesacilisis et. PUZZEL FOUR Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl variper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce facilisis et. PUZZEL FIVE Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisur lacus facilisis et.

THREE

You are in a dream state where don't know what's going on. That seems strange and not right. PUZZEL ONE Fusce aliquet velit vel risus congue, vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce aliSuspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL TWO aFusce aliqubulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusceet. PUZZEL FOUR Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl valicitudin. Ut lacinia pharetra nulla, non maximus ipsum sollicitudin sed. Nullam sit amet scelerisque lore efficitur lacus facilisis et.

Fusce estibulum nisl varius egestas. Donec ultrices convallis erat, quis fermentum nulla lacinia a. Morbi posuere congue eros eget sollicitunec efficitur lacus facilisis et. PUZZEL FIVE Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis tibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

FOUR

Fusce alise vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL ONEFusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nstibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.o

Fuscrttitor orci dui, nec efficitur lacus facilisis et. PUZZEL TWOFusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenon maximus ipsum sollicitudin sed. Nullavitae diam. Curabitur dictum ornare eros, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce aliquet velit vel ris, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL THREE Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius egestas. Donec ultrices convallis er sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce aliqcilisis et. PUZZEL FIVE Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

FIVE

Fusce aliquet . Curabitur dictum ornare eros, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL ONE Fusce aliquet velit vel risus congue, non sodales orci pvallis erat, quis fermentum nulla lacinia a. Moestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce aliqlisis et. PUZZEL TWO Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatis purus, eu vestibulum nisl varius eunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

F eget, dapibus vitae diam. Curabitur dictum ornare eros, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL THREE Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula vem eget, dapibus vitae diam. Curabitur dornare eros, a pharetra sapien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et.

Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatispien semper ut. Suspendisse vestibulum sit amet magna tincidunt feugiat. Etiam porttitor orci dui, nec efficitur lacus facilisis et. PUZZEL FOUR Fusce aliquet velit vel risus congue, non sodales orci pellentesque. Phasellus vehicula venenatiec efficitur lacus facilisis et.

I need to wake up.

You can't do that...

ANSWER

日本語で書いたら読めなくなるはずだ。もし読められるとコメントに教えて。まーこれ，意味ないしどうでもいいんだ。

* * *

**HTML- Most of this is the same concept discussed in Ch 3. You can look at that, use the inspect tool to look at the code or ask me questions.**

**There's various ways of applying classes to text.**

* * *

<p class="invisiblelink" align="center">1 2 3 4 5 6 <a href="#answer" rel="nofollow">7</a> 8 9 0</p>

* * *

**CSS**

* * *

**This just says that no matter what state, the link will not look like a "link.**
    
    
    #workskin .invisiblelink a,
    #workskin .invisiblelink a:link,
    #workskin .invisiblelink a:visited {
      border: 0;
      color: inherit;
      cursor: text;
    }

**This changes the highlight color of the text. Why ::-moz-selection? Cuz Firefox does it's own shit idk. Not all elements are accepted by the various browsers. To counteract this other terms are needed. Usually, there's one for Opera and Explorer/Edge, but I don't know if they need it?**
    
    
    #workskin .invisiblelink a::selection, #workskin .invisiblelink a::-moz-selection  {
      color: white;
      background: #1e25f7;
    }
    

* * *

* * *

* * *

It's not over yet.

What'd I tell you?

**HTML- This is the same concept as the "Popup"**

* * *

<p></p> **< div class="popup">**

<p align="center">It's not over yet.</p>

<p></p><div class="popup-list">

<p align="center">What'd I tell you?</p>

<p>INSERT OTHER TEXT HERE</p>

<p> </p></div>

**< p> </p></div>**

* * *

**CSS**

* * *
    
    
    #workskin .popup {
      position: relative;
      top: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
    }
    
    
    #workskin .popup-list {
      position: relative;
      font-size: 0;
      transition: 2s;
      transition-delay: .5s;
    }
    
    #workskin .popup-list a {
      text-decoration: none;
      border: none;
    }
    
    
    #workskin .popup:hover .popup-list,
    #workskin .popup:hover .popup-list a {
      font-size: inherit;
      transition: .1s;
    }

* * *


	10. Using Gifs and Pictures to Create Background Overlays

**Notes for the Chapter:**

> MOBILE VIEWERS! Tap the title, sidebars, or the endnotes area to cancel the rotation!

* * *

**HTML**

* * *

**< div class="thousandpxcontainer"> (Placed up top. The /div is at the bottom)**

_Nullam tempor dapibus nulla, a hendrerit metus semper fermentum. Nunc eget turpis enim. Fusce volutpat sed libero non maximus. Proin at pulvinar magna. Integer eget iaculis magna, non sagittis arcu. Vivamus non lacus elementum, pharetra metus ac, placerat dolor. Ut euismod lacinia magna, non pellentesque turpis viverra ac. Morbi cursus, eros id posuere tincidunt, est nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus._

**(This is where the pictures go. The container...contains both pictures. I have the HTML width set to 1 pixel because I don't want these pictures to show up in the HTML. This is because the animation won't work unless "Show Creator's Style is selected, So I don't want clunky pics for people who won't see it. Instead, the picture widths are actually set withing the CSS)**

**< div class="expandingblood-container">**

**< p><img class="expandingblood-touch" src="https://archive.org/download/touch_202010/TOUCH.png" width="1" /></p>**

**  
<p><img class="expandingblood-blood" src="https://archive.org/download/BloodSplatter/BloodQuick2.png" width="1" /></p>**

**  
</div>**

* * *

**CSS-**

**I chose to keep the "borders" on so you can see some of my janky positioning. If you copy this,** **the borders are not nessesary.**

* * *

**This isn't actually that relevant and the trick can be done without it. I was doing some other stuff with it.**
    
    
    #workskin .thousandpxcontainer {
      display: block;
      width: 99%;
      border: solid cyan;
      overflow: visible;
    }

**Relative positioning so it stays between paragraphs. Font-size 0 so Ao3 stops fucking with me. And width 100% so that when the blood expands to 100%... it's 100%. If this container's width is less than that then when the image "expands" it will be constrained by this container.**
    
    
    #workskin .expandingblood-container {
      position: relative;
      width: 100%;
      height: 80px;
      font-size: 0;
      border: solid red;
    }

**This is the touch picture. The positioning is...bad sorry. I chose and absolute+left 40% because I needed to position both the Blood and the Touch in the same spot. If one of them was relative then they get moved around more when the sceen size adjusts.**

**I have a background circle here in pale blue just so that incase the picture doesn't load super fast, readers will maybe see the circle and it'll give them a long enough pause to wait.**
    
    
    #workskin .expandingblood-touch {
      position: absolute;
      left: 40%;
      top: 0;
      width: 80px;
      height: 80px;
      background: #489ab825;
      border-radius: 70%;
    }
    

**This is the blood, just a hover technique. The Absolute and Left need to match the Touch picture so that they line up on top of each other. Z-index 1 is so that the blood picture sits on top of the touch. That way you actually touch it when you go near.**
    
    
    #workskin .expandingblood-blood {
      position: absolute;
      top: 0;
      left: 40%;
      height: 80px;
      width: 80px;
      opacity: 0%;
      transition: 1s;
      transition-delay: .3s;
      z-index: 1;
    }
    
    #workskin .expandingblood-blood:hover {
      top: -220px;
      left: 5%;
      right: 2%;
      height: 500px;
      width: 90%;
      opacity: 100%;
      transition: 0s;
    }
    

_Nullam tempor dapibus nulla, a hendrerit metus semper fermentum. Nunc eget turpis enim. Fusce volutpat sed libero non maximus. Proin at pulvinar magna. Integer eget iaculis magna, non sagittis arcu. Vivamus non lacus elementum, pharetra metus ac, placerat dolor. Ut euismod lacinia magna, non pellentesque turpis viverra ac. Morbi cursus, eros id posuere tincidunt, est nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

**< /div>**

* * *

**HTML+CSS**

**Select "Hide creator's style" If you'd like to copy the text.**

**This is literally just a gif overlayed. I made it in OpenToonz which is a free to download, fully functional animation program (Buggy as all hell, but free). There's some tutorials on YouTube. This was made using the Redered Rain FX**

**(I tried to make a gif with lightning... he he uhh bad move)**

* * *

**< p></p><div class="bggif-container">**

_tempor dapibus nulla, a hendrerit metus semper fermentum. Nunc eget turpis enim. Fusce volutpat sed libero non maximus. Proin at pulvinar magna. Integer eget iaculis magna, non sagittis arcu. Vivamus non lacus elementum, pharetra metus ac, placerat dolor. Ut euismod lacinia magna, non pellentesque turpis viverra ac. Morbi cursus, eros id posuere tincidunt,_

**This is literally just a gif overlay.**

**You don't need the container if you want to say, put the gif over the whole page. But if you place the gif somewhere specific, you need a constraining factor.**
    
    
    #workskin .bggif-container {
      position: relative;
      width: 99%;
      overflow: hidden;
      border: solid pink;
    }

**This defines the size of the gif.**
    
    
    #workskin .bggif {
      position: absolute;
      top: 0;
      opacity: 32%;
      width: 100%;
      height: 100%;
    }

_Now....if you look on the internet you'll find a bunch of ways to place an image beneath stuff and have it be unselectable._

_-webkit-user-select: none;  
-ms-user-select: none;  
-o-user-select: none;  
-moz-user-select: none;  
user-select: none;  
z-index: 0;_

_etc. But uh. I don't think they work on Ao3._

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

**< p>**  
** <img class="bggif" src="https://archive.org/download/new-rain-2/New%20Rain%202.gif" width="1" />**  
** </p></div>**

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

_t nisi pellentesque velit, maximus interdum lectus dolor in velit. Duis imperdiet, nunc sit amet interdum lobortis, lorem neque malesuada metus, nec egestas mauris leo eu nulla. Suspendisse quam sapien, ultricies et ultrices eget, semper et ex. Aenean consequat vitae nisi ac aliquet. Cras sit amet suscipit metus_

Words

Words

words words  purpled words

# wtf


End file.
